<script setup>
import { ref } from 'vue'
import { useUserInfoStore } from '../stores/userInfo'
//用于座位表的显示
const seat = ref({})
const userInfoStore = useUserInfoStore()
let isReserved = ref(false)
function getCurrentSeat(newSeat) {
    seat.value = newSeat // 更新座位信息
}

let UserInfo = ref({})
//获取自己的预约信息
async function getReservationData() {
    let reservationData
    await userInfoStore.getMyReservationData()
    await userInfoStore.getUserInfoData()
    if (typeof userInfoStore.myReservation === 'undefined') {
        reservationData = ''
    } else {
        reservationData = userInfoStore.myReservation
    }

    if (reservationData != '') {
        isReserved.value = true
    } else {
        isReserved.value = false
    }

    UserInfo.value = {
        reservation: reservationData,
        myInfo: userInfoStore.myInfo,
        reservationStatus: userInfoStore.reservationStatus
    }
    if (UserInfo.value.reservation != '') {
        isReserved.value = true
    }
    else {
        isReserved.value = false
    }
}

getReservationData()


</script>
<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <Header></Header>
            </el-header>
            <el-main>
                <el-row justify="center" v-show="!isReserved">
                    <el-col :md="12" :xs="22">
                        <notReservation></notReservation>
                    </el-col>
                </el-row>
                <el-row justify="center" v-show="isReserved">
                    <el-col :md="12" :xs="22">
                        <reservationChart :userInfo="UserInfo"></reservationChart>
                    </el-col>
                </el-row>
                <el-row justify="center" v-show="isReserved">
                    <el-col :md="12" :xs="22">
                        <Reservationed :userInfo="UserInfo"></Reservationed>
                    </el-col>
                </el-row>
                <el-row justify="center">
                    <el-col :md="12" :xs="22">
                        <seatView @clickSeat="getCurrentSeat"></seatView>
                    </el-col>
                </el-row>
                <el-row justify="center">
                    <el-col :md="12" :xs="22">
                        <SeatStatus :seat="seat"></SeatStatus>
                    </el-col>
                </el-row>
            </el-main>
            <el-footer>
                <Footer></Footer>
            </el-footer>

        </el-container>
    </div>
</template>

<style>
.el-container,
.el-header,
.el-footer {
    padding: 0;
}

.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}
</style>
